<template>
  <div class="login-container">
    <el-card class="login-card">
      <template #header>
        <h2 class="card-title">用户登录</h2>
      </template>

      <el-form
          ref="loginFormRef"
          :model="loginForm"
          :rules="loginRules"
          label-width="80px"
      >
        <el-form-item label="用户名" prop="username">
          <el-input
              v-model="loginForm.username"
              placeholder="请输入用户名"
              prefix-icon="User"
          />
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input
              v-model="loginForm.password"
              type="password"
              placeholder="请输入密码"
              prefix-icon="Lock"
              show-password
          />
        </el-form-item>

        <el-form-item label="用户类型" prop="type">
          <el-radio-group v-model="loginForm.type">
            <el-radio :label="2">普通用户</el-radio>
            <el-radio :label="1">医生</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" :loading="loading" @click="handleLogin">
            登录
          </el-button>
          <el-button @click="$router.push('/register')">注册账号</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import {useRouter, useRoute} from 'vue-router'
import {ElMessage} from 'element-plus'
import * as userStore from "@/store/userStore.js";
import {login} from "@/api/user.js";

const router = useRouter()
const route = useRoute()

const loginFormRef = ref(null)
const loading = ref(false)

const loginForm = ref({
  username: '',
  password: '',
  type: 2
})

const loginRules = {
  username: [
    {required: true, message: '请输入用户名', trigger: 'blur'},
    {min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur'}
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
    {min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur'}
  ],
  type: [
    {required: true, message: '请选择用户类型', trigger: 'change'}
  ]
}

const handleLogin = async () => {
  loginFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        loading.value = true
        const res = await login(loginForm.value)
        const data = {
          token: res.data.token,
          userInfo: res.data.user
        }
        await userStore.setUser(data)
        ElMessage.success('登录成功')
        // 如果有重定向地址，则跳转到重定向地址
        const redirect = route.query.redirect || '/'
        await router.push(redirect)
      } catch (error) {
        ElMessage.error(error.message || '登录失败')
      } finally {
        loading.value = false
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;

  .login-card {
    width: 100%;
    max-width: 420px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: none;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

    :deep(.el-card__header) {
      padding: 30px 20px 20px;
      border-bottom: none;
    }

    .card-title {
      text-align: center;
      margin: 0;
      font-size: 28px;
      font-weight: 600;
      background: linear-gradient(45deg, #409EFF, #67c23a);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    :deep(.el-card__body) {
      padding: 30px 40px;
    }

    :deep(.el-form-item) {
      margin-bottom: 25px;

      .el-form-item__label {
        font-weight: 500;
        color: #606266;
      }

      .el-input__wrapper {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        transition: all 0.3s;

        &:hover {
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        &.is-focus {
          box-shadow: 0 0 0 1px var(--el-color-primary) inset;
        }
      }

      .el-input__prefix {
        color: #909399;
      }
    }

    :deep(.el-radio-group) {
      display: flex;
      gap: 20px;
    }

    :deep(.el-form-item:last-child) {
      margin-bottom: 0;
      display: flex;
      justify-content: center;
      gap: 16px;

      .el-button {
        min-width: 120px;
        height: 40px;
        font-size: 16px;
        border-radius: 20px;
        transition: all 0.3s;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        &.el-button--primary {
          background: linear-gradient(45deg, #409EFF, #67c23a);
          border: none;
        }
      }
    }
  }
}
</style>
